// webpack包 基于node环境
// 前端js静态资源打包器
// 压缩文件，提高加载速度，集成更多自动化功能（less->css， 压缩。。）
// node+webpack让前端工程化（模块化）成为可能
const path = require('path')
// 自动生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 提取css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 解析vue文件
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
  // 打包入口  默认index.js
  entry: './src/main.js',
  // 打包出口 默认main.js
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './public/index.html'
    }),
    new MiniCssExtractPlugin(),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        // 匹配以.css结尾的文件
        test: /\.css$/i,
        // 加载器从右向左解析
        // css-loader把css解析到js中，style-loader把css样式渲染到页面上
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/i,
        use:[{
          loader: "style-loader"
        },{
          loader: "css-loader"
        },{
         loader: "less-loader"
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg|eot|svg|ttf|woff|woff2)$/i,
        use: [
          {
            // 处理静态资源
            loader: 'url-loader',
            options: {
            //  当加载的图片小于limit时，会将图片编译成base64字符串形式
            //  当加载的图片大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              //打包后的图片存放格式
              // name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  // // webpack打包模式 以开发环境打包
  // mode: 'development',
  // // 开发环境不会压缩到极致，适用于编写代码的环境（默认启用sourcemap记录打包前代码的位置信息）
  // devtool: 'cheap-module-source-map'
  // 上线环境
  mode: 'production',
  devtool: 'source-map'
}
